{% load cctags %}
{% load ccfilters %}

{% block scripts %}
<script type="text/javascript" src="/static/js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("img.preview_img").preview();
    });
</script>
{% endblock %}

{% if route %}
<div class="route_panel">
    <div class="preview_map">
        <a href="{% url routes.routesviews.showroute route.id %}">
            <img class="preview_img" src="{{ route.preview_url|safe }}" title="{{ route.name }}"/>
        </a>
    </div>
    <div class="distance">
        <span class="value">{{ route.distance|divide:"1000"|_u|floatformat:"0" }}</span>
        <span class="unit">{{ unit.km_mile }}</span>
    </div>
    <div class="title_container">
        <span class="route_name">
            <a href="{% url routes.routesviews.showroute route.id %}">{{ route.name }}</a>
        </span>
        <span class="creator">
            {% _ "By" %}
            <a href="{% url riders.ridersviews.userpage route.creator.uid %}"
                    title="{{route.creator.name}}">{{route.creator.name}}</a>
            {% _ "Created on" %}
            {{ route.create_datetime|cctimesince }} {% _ "ago" %}
        </span>
        <span class="route_location">{{ route.start_address }}
        </br> {% _ "to" %}  {{ route.end_address }}</span>
    </div>
</div>
{% else %}
<div class="route_panel" style="display:none">
    <div class="preview_map">
        <a href="">
            <img class="preview_img" title=""/>
        </a>
    </div>
    <div class="distance">
        <span class="value"></span>
        <span class="unit">{{ unit.km_mile }}</span>
    </div>
    <div class="title_container">
        <span class="route_name"><a href=""></a>
        </span>
        <span class="creator">
            {% _ "By" %}
            <a href="" title=""></a>
            {% _ "Created on" %}
        </span>
        <span class="route_location"></span>
    </div>
</div>
{% endif %}
